<template>
  <div>
    <el-table :data="data" border style="overflow-x: hidden">
      <el-table-column prop="id" label="编号" width="100"/>
      <el-table-column prop="desc" label="描述" width="150"/>
      <el-table-column prop="weight" label="重量（kg）" width="100"/>
      <el-table-column prop="sender" label="发货人" width="100"/>
      <el-table-column prop="senderAddr" label="发货地址"/>
      <el-table-column prop="receiver" label="收货人" width="100"/>
      <el-table-column prop="receiverAddr" label="收货地址"/>
      <el-table-column prop="time" label="发货时间"/>
      <el-table-column prop="currState" label="当前状态" width="100"/>
      <el-table-column v-if="option" fixed="right" label="处理" width="60">
        <template slot-scope="scope">
          <el-button type="success" size="medium"
                     icon="el-icon-takeaway-box"
                     @click="process(scope.row)"
                     :disabled="scope.row.currState==='已签收'" circle/>
        </template>
      </el-table-column>
      <el-table-column v-if="see" fixed="right" label="详情" width="60">
        <template slot-scope="scope">
          <el-button type="primary" size="medium"
                     icon="el-icon-tickets"
                     @click="seeIt(scope.row)" circle/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change=" handleSizeChange
                    "
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "PackageTable",
  props: {
    data: {},
    option: {
      type: Boolean,
      default: false
    },
    see: {
      type: Boolean,
      default: false
    },
    process: {
      type: Function,
      default: (item) => {
        console.log(item)
      }
    },
    handleSizeChange: {
      type: Function,
      default: (val) => {
        console.log(val)
      }
    },
    handleCurrentChange: {
      type: Function,
      default: (val) => {
        console.log(val)
      }
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 5
    },
    total: {
      type: Number,
      default: 0
    },
  },
  methods: {
    seeIt(item) {
      sessionStorage.setItem('pkgSearchItem', JSON.stringify(item))
      this.$router.push('/pkg/search')
    }
  }
}
</script>